<script setup>
    import {computed, ref} from 'vue'
    import {useRoute,useRouter} from 'vue-router'
    import ShopInfo from '@/components/home/ShopInfo.vue';
    import Product from '@/components/shop/Product.vue';
    import useShopStore from '@/stores/shop.js'
    import CartBottom from '@/components/shop/CartBottom.vue';

    const router = useRouter()
    // 获取路由传参
    const route = useRoute()
    console.log(typeof route.query.id)

    // 获取仓库中nearByList
    const shopStore = useShopStore()

    // 获取当前店铺的基本信息
    const shopInfo = shopStore.nearByList.find(item => item.id == route.query.id)
    // 处理分类高亮
    const curCate = ref(0)
    const getCurCate = (id)=>{
        curCate.value = id
    }

    // 遍历商品  // 计算属性有监听的特性
    const productList = computed(()=>{
        // 判断是否为全部商品  ----> 数组合并
        let arr = []
        if(curCate.value === 0){
            // 遍历所有的分类中的list
            shopInfo.category.forEach(item =>{
                // 通过展开运算符合并
                arr = [...arr,...item.list]
            })
            return arr
        }else{
            // 获取某个分类
            arr = shopInfo.category.find(item => item.id === curCate.value)
            return arr.list
        }
    })

    // 返回一步
    const goBack = ()=>{
        router.go(-1)
    }
</script>

<template>
    <div class="shop">
        <!-- 搜索 -->
        <div class="search">
            <span class="iconfont search_back" @click="goBack">&#xe697;</span>
            <div class="search_content">
                <span class="iconfont search_content_icon">&#xe632;</span>
                <input type="text" class="search_content_input" placeholder="请输入商品名称">
            </div>
        </div>
        <!-- 商店信息 -->
        <div class="shop_info">
            <ShopInfo :shopInfo="shopInfo"></ShopInfo>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="category">
                <div class="category_item" :class="{'category_item--active':curCate === 0}" @click="getCurCate(0)">全部商品</div>
                <div class="category_item" :class="{'category_item--active':curCate === item.id}" v-for="item in shopInfo.category" :key="item.id" @click="getCurCate(item.id)">{{ item.name }}</div>
            </div>
            <div class="product">
                <div v-for="item in productList" :key="item.id">
                    <Product :productInfo="item" :shopName="shopInfo.name"></Product>
                </div>
              
            </div>
        </div>
        <!-- 购物车底部 -->
        <CartBottom :shopName="shopInfo.name"></CartBottom>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.shop {
    //搜索
    .search {
        margin: .18rem;
        display: flex;
        align-items: center;

        &_back {
            font-size: .24rem;
            margin-right: .08rem;
            color: #b6b6b6;
        }
        &_content {
            flex: 1;
            height: .32rem;
            background-color: #f5f5f5;
            border-radius: .16rem;
            display: flex;
            align-items: center;

            &_icon {
                color: #b6b6b6;
                margin: 0 .12rem;
            }
            &_input {
                border: none;
                outline: none;
                background: none;
                width: 100%;
                height: .32rem;
            }
        }
    }
    //商店信息
    .shop_info {
        margin: 0 .18rem;
    }
    // 内容
    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 1.7rem;
        bottom: .5rem;
        display: flex;

        .category {
            overflow-y: scroll;
            width: .78rem;
            background-color: #f5f5f5;

            &_item {
                line-height: .4rem;
                font-size: .14rem;
                text-align: center;
                color: $content_fontcolor;

                &--active {
                    background-color: $bgColor;
                }
            }
        }
        .product {
            flex: 1;
            overflow-y: scroll;
        }
    }
}
</style>